import React from "react";
import { FaTools, FaSearch, FaStar, FaRocket, FaEnvira, FaFlushed, FaFortAwesomeAlt } from "react-icons/fa";
import { Link } from 'react-router-dom';
import Header from './Header';
import Footer from '@/Footer';
import ToolCard from '@/components/ToolCard'

const HomePage = () => {
    return (
        <div className="min-h-screen">
            <Header />

            <section className="text-center mx-auto px-4 py-12">
                <h2 className="text-4xl md:text-6xl font-bold mb-4">
                    Your Ultimate Pro Tools
                </h2>
                <p className="text-xl mb-8">All the tools you need, in one place.</p>
                <div className="relative max-w-md mx-auto">
                    <input
                        type="text"
                        placeholder="Search for a tool..."
                        className="w-full py-3 px-4 rounded-full bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-white"
                    />
                    <FaSearch className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white" />
                </div>
            </section>
            <main className="container mx-auto px-4 py-12">
                <div className="text-3xl font-bold mb-4">Latest Tools</div>
                <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <ToolCard
                        icon={<FaTools className="h-12 w-12" />}
                        title="File Converter"
                        description="Convert files between different formats easily."
                    />
                    <ToolCard
                        icon={<FaStar className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaRocket className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                    <ToolCard
                        icon={<FaEnvira className="h-12 w-12" />}
                        title="Random String Generate"
                        description="Generate a string of any length, composed of any combination of letters, numbers, and special characters."
                    />
                    <ToolCard
                        icon={<FaFlushed className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaFortAwesomeAlt className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                </section>
            </main>
            <main className="container mx-auto px-4 py-12">
                <div className="text-3xl font-bold mb-4">Hot Tools</div>
                <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <ToolCard
                        icon={<FaTools className="h-12 w-12" />}
                        title="File Converter"
                        description="Convert files between different formats easily."
                    />
                    <ToolCard
                        icon={<FaStar className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaRocket className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                    <ToolCard
                        icon={<FaEnvira className="h-12 w-12" />}
                        title="Random String Generate"
                        description="Generate a string of any length, composed of any combination of letters, numbers, and special characters."
                    />
                    <ToolCard
                        icon={<FaFlushed className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaFortAwesomeAlt className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                </section>
            </main>
            <main className="container mx-auto px-4 py-12">
                <div className="text-3xl font-bold mb-4">Hot Tools</div>
                <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <ToolCard
                        icon={<FaTools className="h-12 w-12" />}
                        title="File Converter"
                        description="Convert files between different formats easily."
                    />
                    <ToolCard
                        icon={<FaStar className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaRocket className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                    <ToolCard
                        icon={<FaEnvira className="h-12 w-12" />}
                        title="Random String Generate"
                        description="Generate a string of any length, composed of any combination of letters, numbers, and special characters."
                    />
                    <ToolCard
                        icon={<FaFlushed className="h-12 w-12" />}
                        title="Image Editor"
                        description="Edit and enhance your images online."
                    />
                    <ToolCard
                        icon={<FaFortAwesomeAlt className="h-12 w-12" />}
                        title="Code Formatter"
                        description="Format and beautify your code instantly."
                    />
                </section>
            </main>

            

            <Footer />
        </div>
    );
};

export default HomePage;
